<template>
  <view class="container" :style="headerStyle">
		<view class="header">
      <view class="header-content">
        <text class="header-content-name">Hello, {{ userInfo.principal.nickName }}</text>
        <text class="header-content-id">ID：{{ userInfo.principal.username }}</text>
      </view>
      <image class="header-image" src="/static/images/me-header.png" mode="scaleToFill"></image>
    </view>
    <view class="number-box">
      <view class="number-item">
        <view class="number-item-n">
          <text>{{ `${traineeInfo.finishCourseCount || 0}/${traineeInfo.courseCount || 0}` }}</text>
        </view>
        <view class="number-item-h">课程学习</view>
      </view>
      <view class="number-item">
        <view class="number-item-n">
          <text>{{ traineeInfo.exerciseCount || 0 }}</text>
          <text class="number-item-unit">次</text>
        </view>
        <view class="number-item-h">练习次数</view>
      </view>
      <view class="number-item">
        <view class="number-item-n">
          <text class="text-hidden">{{ traineeInfo.exerciseTime || 0 }}</text>
          <text class="number-item-unit">分钟</text>
        </view>
        <view class="number-item-h">练习时长</view>
      </view>
    </view>
    <view class="list-card">
      <view class="list-cell" @click="handleGoList()">
        <text class="cell-item-txt">最近练习记录</text>
        <text v-if="!list.length" class="cell-item-hint">暂无</text>
        <image class="cell-item-arrow" src="/static/images/me-arrow.png" mode="scaleToFill"></image>
      </view>
      <scroll-view v-if="list.length" class="list-box" :scroll-y="false"  :scroll-x="true" :show-scrollbar="false">
        <view v-for="(item, index) in list" :key="index" class="list-item" @click="handleGoReport(item)">
          <view class="list-item-card">
            <image class="list-item-card-img" :src="item.videoPoster ? item.videoPoster : '/static/images/me-list-img.png'" mode="aspectFit"></image>
            <view class="list-item-card-score" :class="getTagClass(item)">
              <text class="list-item-card-score-txt">{{ item.comprehensiveScore || 0 }}分</text>
            </view>
            <view class="list-item-card-time">
              <text class="list-item-card-time-txt">{{ formatTime(item.useTime) }}</text>
            </view>
          </view>
          <view class="list-item-name">第{{ item.exerciseNumber || 1 }}次{{ item.exerciseTypeName }}</view>
          <view class="list-item-time">{{ item.finishTime || '--' }}</view>
          <view class="list-item-hint">课时：{{ item.lessonName }}</view>
        </view>
      </scroll-view>
    </view>
    <view class="cell-box">
      <view class="cell-item" @click="handleGoPassword()">
        <image class="cell-item-image" src="/static/images/me-cell-psd.png" mode="scaleToFill"></image>
        <text class="cell-item-txt">修改密码</text>
        <image class="cell-item-arrow" src="/static/images/me-arrow.png" mode="scaleToFill"></image>
      </view>
      <view class="cell-line"></view>
      <view class="cell-item" @click="handleLoginOut()">
        <image class="cell-item-image" src="/static/images/me-cell-out.png" mode="scaleToFill"></image>
        <text class="cell-item-txt">退出登录</text>
        <image class="cell-item-arrow" src="/static/images/me-arrow.png" mode="scaleToFill"></image>
      </view>
    </view>
  </view>
</template>

<script >
import { logout, getTrainee } from '@/api/auth.js'
import { getAllExercise } from '@/api/course.js'
import { RESOURCE_URL } from '@/api/request.js'
import { formatTime as formatTimeUtil } from '@/utils/index.js'

export default {
  data() {
    return {
      statusBarHeight: uni.upx2px(88),
      userInfo: {
        principal: {}
      },
      nickName: '',
      userId: '--',
      list: [],
      traineeInfo: {}
    }
  },
  computed: {
    headerStyle() {
      return {
        paddingTop: this.statusBarHeight + 'px'
      }
    }
  },
  mounted() {
    this.getStatusBarHeight()
    this.initPage()
  },
  methods: {
    initPage() {
      this.userInfo = uni.getStorageSync('userInfo')
      this.getList()
      this.getTraineeData()
    },
    async getTraineeData() {
      const result = await getTrainee()
      this.traineeInfo = result
    },
    async getList() {
      const result = await getAllExercise({
        limit: 10,
        page: 1
      })
      if (result.list) {
        result.list = result.list.map(item => {
          item.exerciseFiles.forEach(fileInfo => {
            if ((fileInfo.isPicture === 1 || fileInfo.isPicture === '1') && !item.videoPoster) {
              item.videoPoster = RESOURCE_URL + fileInfo.filePath
            }
          })
          return item
        })
        this.list = result.list
      }
    },
    async loginOutFn() {
      await logout()
      uni.setStorageSync('token', '')
      uni.setStorageSync('userInfo', '')
		  uni.reLaunch({ url: '/pages/login/index' })
    },
    handleLoginOut() {
      uni.showModal({
        title: '提示',
        content: '是否确认退出登录？',
        success: (res) => {
          if (res.confirm) {
            this.loginOutFn()
          }
        }
      });
    },
    handleGoList() {
      uni.navigateTo({url: '/pages/exerciseList/index'})
    },
    handleGoPassword() {
      uni.navigateTo({url: '/pages/password/index'})
    },
    handleGoReport(item) {
      uni.navigateTo({url: `/pages/course/follow/report/index?exerciseId=${item.exerciseId}`})
    },
    getTagClass(item) {
      if (item.comprehensiveScore <= 59) {
        return 'ist-item-card-score-red'
      } else if (item.comprehensiveScore >= 59 && item.comprehensiveScore <= 69) {
        return 'ist-item-card-score-yellow'
      } else if (item.comprehensiveScore >= 69 && item.comprehensiveScore <= 85) {
        return 'ist-item-card-score-blue'
      } else if (item.comprehensiveScore >= 85 && item.comprehensiveScore <= 95) {
        return ''
      } else if (item.comprehensiveScore >= 95 && item.comprehensiveScore <= 100) {
        return ''
      }
    },
    getStatusBarHeight() {
      // #ifdef APP
      // 获取系统信息
      uni.getSystemInfo({
        success: (res) => {
          this.statusBarHeight = res.statusBarHeight || 0
        }
      })
      // #endif
      // #ifndef APP
      this.statusBarHeight = 0
      // #endif
    },
    formatTime(seconds) {
      return formatTimeUtil(seconds)
    }
  }
}
</script>

<style lang="scss">
.container{
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(207deg, #DCECFF 2%, #F6F7FB 61%);
  .header{
    width: 100%;
    height: 240rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 64rpx;
    .header-content{
      flex: 1;
      .header-content-name{
        width: 80%;
        font-size: 48rpx;
        font-weight: 600;
        line-height: 64rpx;
        color: #202844;
        display: block;
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏溢出的文本 */
        text-overflow: ellipsis; /* 显示省略号来代表被修剪的文本 */
      }
      .header-content-id{
        font-size: 24rpx;
        font-weight: normal;
        line-height: 40rpx;
        color: rgba(32, 40, 68, 0.65);
        margin-top: 8rpx;
      }
    }
    .header-image{
      width: 128rpx;
      height: 128rpx;
      border-radius: 100%;
      overflow: hidden;
    }
  }
  .number-box{
    width: calc(100% - 64rpx);
    height: 144rpx;
    margin: 0 auto;
    border-radius: 16rpx;
    background: #FFFFFF;
    padding: 24rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    .number-item{
      flex: 1;
      padding: 0 32rpx;
      overflow: hidden;
      .number-item-n{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: baseline;
        justify-content: center;
        text{
          line-height: 56rpx;
          font-size: 40rpx;
          color: #1F1F1F;
        }
        .number-item-unit{
          font-size: 24rpx;
          color: #1F1F1F;
        }
      }
      .number-item-h{
        font-size: 24rpx;
        line-height: 40rpx;
        text-align: center;
      }
    }
  }
  .cell-box{
    width: calc(100% - 64rpx);
    margin: 0 auto;
    border-radius: 16rpx;
    background: #FFFFFF;
    margin-top: 32rpx;
    .cell-item{
      width: 100%;
      height: 112rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0 32rpx;
      .cell-item-image{
        width: 44rpx;
        height: 44rpx;
        margin-right: 20rpx;
      }
      .cell-item-txt{
        flex: 1;
        font-size: 32rpx;
        color: #1F1F1F;
      }
      .cell-item-arrow{
        width: 36rpx;
        height: 36rpx;
      }
    }
    .cell-line{
      width: 100%;
      height: 2rpx;
      margin-left: 96rpx;
      background: #EBEDEF;
    }
  }
  .list-card{
    width: calc(100% - 64rpx);
    margin: 0 auto;
    border-radius: 16rpx;
    background: #FFFFFF;
    margin-top: 32rpx;
    padding-left: 48rpx;
    .list-cell{
      width: 100%;
      height: 112rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-right: 32rpx;
      .cell-item-txt{
        flex: 1;
        font-size: 32rpx;
        color: #333333;
        font-weight: 600;
      }
      .cell-item-hint{
        font-size: 28rpx;
        color: rgba(32, 40, 68, 0.5);
      }
      .cell-item-arrow{
        width: 36rpx;
        height: 36rpx;
      }
    }
    .list-box{
      width: 100%;
      white-space: nowrap;
      padding-bottom: 32rpx;
      .list-item{
        width: 336rpx;
        height: 330rpx;
        margin-right: 32rpx;
        display: inline-block;
        .list-item-card{
          width: 336rpx;
          height: 190rpx;
          border-radius: 16rpx;
          overflow: hidden;
          // background: #F0F0F0;
          background: black;
          position: relative;
          .list-item-card-img{
            width: 100%;
            height: 100%;
            border-radius: 16rpx;
          }
          .list-item-card-score{
            position: absolute;
            top: 0;
            left: 0;
            height: 60rpx;
            padding: 0 12rpx;
            background: #EBF8F0;
            border-radius: 16rpx 0rpx 16rpx 0rpx;
            .list-item-card-score-txt{
              color: #3DBA6D;
              font-size: 28rpx;
              font-weight: 600;
              line-height: 60rpx;
            }
          }
          .list-item-card-score-red{
            background: #FFF2F0;
            .list-item-card-score-txt{
              color: #F02525;
            }
          }
          .list-item-card-score-yellow{
            background: #FFF8E6;
            .list-item-card-score-txt{
              color: #F28F15;
            }
          }
          .list-item-card-score-blue{
            background: #E6F3FF;
            .list-item-card-score-txt{
              color: #155BD4;
            }
          }
          .list-item-card-time{
            position: absolute;
            bottom: 8rpx;
            right: 8rpx;
            min-width: 84rpx;
            height: 40rpx;
            padding: 0 12rpx;
            border-radius: 40rpx;
            background: rgba(0, 0, 0, 0.6);
            .list-item-card-time-txt{
              color: rgba(255, 255, 255, 0.95);
              font-size: 24rpx;
              line-height: 40rpx;
            }
          }
        }
        .list-item-name{
          font-size: 28rpx;
          font-weight: 600;
          line-height: 44rpx;
          color: #333333;
          margin-top: 16rpx;
        }
        .list-item-time{
          font-size: 24rpx;
          line-height: 40rpx;
          color: #999999;
        }
        .list-item-hint{
          font-size: 24rpx;
          line-height: 40rpx;
          color: #999999;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 90%;
        }
      }
    }
  }
}
.text-hidden{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 56rpx);
}
</style>
